<template>
  <div>
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-input
            v-model="formInline.TitleName"
            placeholder="请输入标题名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            clearable
            v-model="formInline.Issuer"
            placeholder="请选择发布人"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="formInline.IssueTime"
            type="date"
            placeholder="选择发布日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-button @click="add">添加</el-button>
    <el-button>删除</el-button>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column fixed prop="Id" label="序号" width="100">
      </el-table-column>
      <el-table-column prop="TitleName" label="标题名称" width="150">
      </el-table-column>
      <el-table-column prop="IssueTime" label="发布时间" width="300">
      </el-table-column>
      <el-table-column label="操作" width="120"> </el-table-column>
    </el-table>
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageindex"
        :page-sizes="[50, 100, 150, 200]"
        :page-size="pageize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
      >
      </el-pagination>
    </div>
  </div>
</template>
    
    <script>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
export default {
  setup() {
    //列表显示
    const tableData = ref([]);
    //查询条件
    const formInline = reactive({
      TitleName: "",
      Issuer: "",
      IssueTime: "",
    });
    //发布人
    const options = ref([]);
    //跳转
    const router = useRouter();
    //点击排产Scheduling跳转
    const add = () => {
      router.push({ path: "/InFormAdd" });
    };
    //分页点击事件
    const handleSizeChange = (val) => {
      console.log(`当前页: ${val}`);
    };
    //分页点击事件
    const handleCurrentChange = (val) => {
      console.log(`当前页: ${val}`);
    };

    return {
      tableData,
      formInline,
      handleSizeChange,
      handleCurrentChange,
      add,
      options,
    };
  },
};
</script>